<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: HeAo
 * @LastEditTime: 2022-01-05 20:48:25
-->
<template>
  <div id="Botton4" style="height: 90%">
    <div id="deviceDtb" style="height: 150px"></div>
  </div>
</template>

<script>
import { Column } from "@antv/g2plot";
export default {
  data() {
    return {};
  },

  methods: {
    initChart() {
      const data = [
        {
          name: "工程数量",
          deviceNum: "广西",
          Number: 3,
        },
        {
          name: "工程数量",
          deviceNum: "江苏",
          Number: 6,
        },
        {
          name: "工程数量",
          deviceNum: "上海",
          Number: 4,
        },
        {
          name: "工程数量",
          deviceNum: "福建",
          Number: 3,
        },
        {
          name: "工程数量",
          deviceNum: "湖南",
          Number: 2,
        },

        {
          name: "设备数量",
          deviceNum: "广西",
          Number: 6,
        },
        {
          name: "设备数量",
          deviceNum: "江苏",
          Number: 12,
        },
        {
          name: "设备数量",
          deviceNum: "上海",
          Number: 4,
        },
        {
          name: "设备数量",
          deviceNum: "福建",
          Number: 7,
        },
        {
          name: "设备数量",
          deviceNum: "湖南",
          Number: 5,
        },
      ];
      const stackedColumnPlot = new Column("deviceDtb", {
        data,
        isGroup: true,
        xField: "deviceNum",
        yField: "Number",
        seriesField: "name",
        /** 设置颜色 */
        //color: ['#1ca9e6', '#f88c24'],
        /** 设置间距 */
        // marginRatio: 0.1,
        label: {
          // 可手动配置 label 数据标签位置
          position: "middle", // 'top', 'middle', 'bottom'
          // 可配置附加的布局方法
          layout: [
            // 柱形图数据标签位置自动调整
            { type: "interval-adjust-position" },
            // 数据标签防遮挡
            { type: "interval-hide-overlap" },
            // 数据标签文颜色自动调整
            { type: "adjust-color" },
          ],
        },
      });

      stackedColumnPlot.render();
    },
  },

  mounted() {
    this.initChart();
  },
};
</script>